import { Button } from "antd";
import { useState } from "react";

class MyEventEmitter {
  constructor() {
    // eventMap 用来存储事件和监听函数之间的关系
    this.eventMap = {}
    console.log("EventEmitter实例已初始化，开启发布订阅!");
  }


  // type 这里就代表时间的名称
  on(type, handler) {
    //hanlder 必须是一个函数
    if (!handler instanceof Function) {
      throw new Error("handler 必须是一个函数")
    }

    // 判断type 时间对应的队列是否存在
    if (!this.eventMap[type]) {
      // 如果不存在，新建改队列
      this.eventMap[type] = []
    }
    // 若存在，直接往队列里推入handler
    this.eventMap[type].push(handler)
  }

  emit(type, params) {
    // 假设该事件是有订阅（对应的事件队列存在）
    if (this.eventMap[type]) {
      // 将事件队列里的handler 依次放在执行出队
      this.eventMap[type].forEach((handler, index) => {
        handler(params)
      })

    }
  }

  off(type, handler) {
    if (this.eventMap[type]) {
      this.eventMap[type].splice(this.eventMap[type].indexOf(handler) >>> 0, 1)
    }
  }
}


const EventView = () => {
  // const myEvent = new MyEventEmitter()
  // const testHandler = function (params) {
  //   console.log("test 事件触发了，testHandler 接受到的入参是", params);
  // }

  // // 监听test 事件
  // myEvent.on('test', testHandler)

  // // 触发test 事件的同时，传入希望testHandler 感知的参数
  // myEvent.emit('test', "helle world")

  return (
    <div>
      手写发布订阅模式，数据传输
      <hr />
    </div>
  )
}
// 订阅一个事件
const EventViewA = () => {
  // const [count, setCount] = useState(1)
  const globalEvent = window.myEvent
  function handler(num) {
    console.log("EeventViewA的参数", num);
    // setCount(num)
    return num
  }
  const HandlerClick = () => {
    // 注册一个事件
    globalEvent.on('test', handler)
  }
  return (
    <div>
      <Button onClick={() => HandlerClick()}> 订阅+1</Button>
      <hr />
    </div>
  )
}

// 发布一个事件
const EventViewB = () => {
  const globalEvent = window.myEvent
  const [count, setCount] = useState(1)

  const HandlerClick = (num) => {
    // 注册一个事件
    const count = globalEvent.emit('test', num)
    console.log("发布一个事件", count);
    setCount(count)
  }
  return (
    <div>

      <h3> 订阅数:{count}</h3>
      <Button onClick={() => HandlerClick(2)}> 发布+1</Button>
      <hr />
    </div>
  )
}
export {
  EventView,
  EventViewA,
  EventViewB,
  MyEventEmitter
}